<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台页面</title>
    <link rel="stylesheet" href="./EasyUI-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" href="css/icon.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="./js/jquery-1.8.0.min.js"></script>
    <script src="./EasyUI-1.5.3/jquery.min.js"></script>
    <script src="./EasyUI-1.5.3/jquery.easyui.min.js"></script>
    <script src="./EasyUI-1.5.3/locale/easyui-lang-zh_CN.js"></script>
    <!-- <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script> -->
    <style>
    </style>
</head>
<body class="easyui-layout">
        <!--头部-->
        <div class="index-header" data-options="region:'north',border:false">
            <div class="index-header-left">
                <h1>后台管理系统</h1>
            </div>
            <div class="index-header-right">
                <p><strong class="easyui-tooltip" title="2条未读消息">Hideer</strong>，欢迎您！</p>
                <p><a href="#">网站首页</a>|<a href="#">支持论坛</a>|<a href="#">帮助中心</a>|<a href="#">安全退出</a></p>
            </div>
        </div>

		<div data-options="region:'south'" style="height:50px;text-align:center;line-height:50px">
            &copy; 2017 yu All Rights Reserved
        </div>
        
        <!--左侧目录栏-->
        <div class="index-sidebar" data-options="region:'west',split:true,border:true,title:'导航菜单'">
            <div class="easyui-accordion" data-options="border:false,fit:true">
                <div title="新闻管理系统" data-options="iconCls:'icon-application-cascade'" style="padding:5px;">
                    <ul class="easyui-tree index-side-tree" data-options="animate:true,state:closed ">
                        <li iconCls="icon-chart-organisation" class=""><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="file/layout-users.html" iframe="1">用户管理</a></li>
                        <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link=file/layout-category.html" iframe="1">分类管理</a></li>
                        <li iconCls="icon-user-group" data-options="state:closed" >
                                <span>新闻管理</span>
                            <ul>
                                <li iconCls="icon-application-osx">
                                    <a href="javascript:void(0)" data-icon="icon-user-group" data-options="state:'closed'" data-link="file/layout-news.html" iframe="1">发布新闻</a>
                                </li iconCls="icon-user-group">
                                <li iconCls="icon-edit">
                                    <a href="javascript:void(0)" data-icon="icon-user-group" data-options="state:'closed'" data-link="file/layout-newsAdmin.html" iframe="1">管理新闻</a>
                                </li>
                            </ul>
                        </li>
                    <!-- <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-options="state:'closed'" data-link="file/layout-news.html" iframe="1">新闻管理</a>

                        </li> -->
                        <li iconCls="icon-user-group" data-options="state:closed" >
                                <span>评论管理</span>
                            <ul>
                                <li iconCls="icon-application-osx">
                                    <a href="javascript:void(0)" data-icon="icon-user-group" data-options="state:'closed'" data-link="file/layout-comments.html" iframe="1">评论操作</a>
                                </li iconCls="icon-user-group">
                            </ul>
                        </li>
                    </ul>
                </div>
                <div title="内容管理" data-options="iconCls:'icon-application-form-edit'" style="padding:5px;">  	
                    
                </div>
            </div>
        </div> 
		<!-- <div data-options="region:'west',split:true" title="目录栏" style="width:15%;">
            <div class="easyui-accordion" data-options="fit:true,border:false">
                <div title="新闻管理栏目" style="padding:10px;">
                    <ul class="easyui-tree">
                        <li>
                            <span>首页</span>
                            <ul>
                                <li data-options="state:'closed'">
                                    <span>用户管理</span>
                                    <ul>
                                        <li>
                                            <span>Friend</span>
                                        </li>
                                        <li>
                                            <span>Wife</span>
                                        </li>
                                        <li>
                                            <span>Company</span>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <span>文件管理</span>
                                    <ul>
                                        <li>Intel</li>
                                        <li>Java</li>
                                        <li>Microsoft Office</li>
                                        <li>Games</li>
                                    </ul>
                                </li>
                                <li>
                                    <span>网站首页</span>
                                    <ul>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                        <li><span></span></li>
                                    </ul>
                                </li>
                                <li>关于我们</li>
                                <li>联系我们</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div title="Title2" data-options="selected:true" style="padding:10px;">
                    <div style="margin: 5px">
                        <ul class="tree easyui-tree" data-options="animate:true,lines:true">
                            <li data-options="iconCls:'icon-group'">
                                <span>基本设置</span>
                                <ul>
                                    <li data-options="iconCls:'icon-group_add'" >
                                        <span>test1</span>
                                    </li>
                                    <li data-options="iconCls:'icon-group_delete'">
                                        <span>test2</span>
                                    </li>
                                    <li data-options="iconCls:'icon-group_edit'">
                                        <span>test3</span>
                                    </li>
                                </ul>
                            </li>
                            <li data-options="state:'closed',iconCls:'icon-joystick'">
                                <span>系统设置</span>
                                <ul>
                                    <li data-options="iconCls:'icon-joystick_add'">
                                        <span>test4</span>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                 </div>
                </div>
                <div title="Title3" style="padding:10px">
                    content3
                </div>
            </div>
        </div> -->

        <!--中间内容区-->
		<!-- <div data-options="region:'center',title:'Main Title',iconCls:'icon-tip'">
            <div id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools'">
                <div title="主页" data-options="iconCls:'icon-house'" style="padding: 10px;height:300px">
                    <table class="easyui-datagrid" data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
                        <thead>
                            <tr>
                                <th data-options="field:'itemid'" width="80">Item ID</th>
                                <th data-options="field:'productid'" width="100">Product ID</th>
                                <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
                                <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
                                <th data-options="field:'attr1'" width="150">Attribute</th>
                                <th data-options="field:'status',align:'center'" width="60">Status</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div id="tab-tools">
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
            </div>
        </div> -->

        <!--首页栏目-->
        <div class="index-main" data-options="region:'center'">
            <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">  
                <!-- <div title="首页" data-options="href:'file/layout-main.html',closable:false,iconCls:'icon-tip',cls:'pd3'"></div> -->
            </div>
        </div>

        <!-- <script type="text/javascript">
            var index = 0;
            function addPanel() {
                index++;
                $('#tabs').tabs('add', {
                    title: 'Tab' + index,
                    content: '<div style="padding:10px">Content' + index + '</div>',
                    closable: true
                });
            }
            function removePanel() {
                var tab = $('#tabs').tabs('getSelected');
                if (tab) {
                    var index = $('#tabs').tabs('getTabIndex', tab);
                    $('#tabs').tabs('close', index);
                }
            }
        </script> -->
         <script type="text/javascript">
            $(function(){
                $('.index-side-tree a').bind("click",function(){
                    var title = $(this).text();
                    var url = $(this).attr('data-link');
                    var iconCls = $(this).attr('data-icon');
                    var iframe = $(this).attr('iframe')==1?true:false;
                    addTab(title,url,iconCls,iframe);
                });	
            })
            
            // /**
            // * Name 载入树形菜单 
            // */
            // $('#wu-side-tree').tree({
            //     url:'temp/menu.json',
            //     cache:false,
            //     onClick:function(node){
            //         var url = node.attributes['url'];
            //         if(url==null || url == ""){
            //             return false;
            //         }
            //         else{
            //             console.log(url);
            //             addTab(node.text, url, '', node.attributes['iframe']);
            //         }
            //     }
            // });
            
            /**
            * Name 选项卡初始化
            */
            $('#wu-tabs').tabs({
                tools:[{
                    iconCls:'icon-reload',
                    border:false,
                    handler:function(){
                        $('#wu-datagrid').datagrid('reload');
                    }
                }]
            });
                
            /**
            * Name 添加菜单选项
            * Param title 名称
            * Param href 链接
            * Param iconCls 图标样式
            * Param iframe 链接跳转方式（true为iframe，false为href）
            */	
            function addTab(title, href, iconCls, iframe){
                var tabPanel = $('#wu-tabs');
                if(!tabPanel.tabs('exists',title)){
                    var content = '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
                    if(iframe){
                        tabPanel.tabs('add',{
                            title:title,
                            content:content,
                            iconCls:iconCls,
                            fit:true,
                            cls:'pd3',
                            closable:true
                        });
                    }
                    else{
                        tabPanel.tabs('add',{
                            title:title,
                            href:href,
                            iconCls:iconCls,
                            fit:true,
                            cls:'pd3',
                            closable:true
                        });
                    }
                }
                else
                {
                    tabPanel.tabs('select',title);
                }
            }
            /**
            * Name 移除菜单选项
            */
            function removeTab(){
                var tabPanel = $('#wu-tabs');
                var tab = tabPanel.tabs('getSelected');
                if (tab){
                    var index = tabPanel.tabs('getTabIndex', tab);
                    tabPanel.tabs('close', index);
                }
            }
        </script>
</body>
</html>